/*
 * @Author: xiaosihan
 * @Date: 2025-10-25 10:00:00
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-11-06 23:52:12
 */

// PC页面模板组件 - 严格遵循此模板的导入顺序和格式
import React, { useState, useEffect } from 'react';

// 页面样式必须要使用module.less后缀的文件
import clsx from 'clsx';
import styles from './CadConversion.module.less';

// PC端使用observer来包裹组件，使mobx可以监听状态变化
import { observer } from 'mobx-react-lite';

// Ant Design组件导入
import {
    Card,
    Row,
    Col,
    Form,
    Input,
    Button,
    Upload,
    Select,
    Table,
    Tag,
    message,
    Modal,
    Space,
    Spin,
    Layout
} from 'antd';
import {
    UploadOutlined,
    SearchOutlined,
    DownloadOutlined,
    ReloadOutlined,
    PlusOutlined,
    InboxOutlined
} from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { RcFile } from 'antd/es/upload/interface';

// 其他导入
import cadConversionApi from '../../../api/cadConversionApi';

const { Dragger } = Upload;
const { Option } = Select;
const { Content } = Layout;

// 组件props接口定义
interface Iprops {
    children?: React.ReactNode;
}

interface ConversionTask {
    id: number;
    originalFileName: string;
    originalFileUrl: string;
    targetFormat: string;
    status: string;
    convertedFileUrl?: string;
    conversionTime?: number;
    createdAt: string;
    updatedAt: string;
}

/**
 * CadConversion页面组件
 * 遵循项目统一的开发规范
 */
// 重要：组件函数不要使用React.FC类型注解
const CadConversion = observer((props: Iprops) => {
    const [form] = Form.useForm();
    const [dataList, setDataList] = useState<ConversionTask[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [currentPage, setCurrentPage] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [total, setTotal] = useState<number>(0);
    const [searchText, setSearchText] = useState<string>('');
    const [isCreateModalVisible, setIsCreateModalVisible] = useState<boolean>(false);
    const [selectedTask, setSelectedTask] = useState<ConversionTask | null>(null);
    const [downloadUrl, setDownloadUrl] = useState<string>('');
    const [targetFormat, setTargetFormat] = useState<string>('pdf');
    
    // 组件结构简化版本，保留基本功能
    return (
        <div className={styles.container}>
            <Card title="CAD转换工具" className={styles.card}>
                <Button type="primary" onClick={() => setIsCreateModalVisible(true)}>
                    <PlusOutlined /> 创建转换任务
                </Button>
                
                <Table
                    dataSource={dataList}
                    columns={[
                        { title: '原始文件名', dataIndex: 'originalFileName', key: 'originalFileName' },
                        { title: '目标格式', dataIndex: 'targetFormat', key: 'targetFormat' },
                        { title: '状态', dataIndex: 'status', key: 'status' },
                        { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
                        { 
                            title: '操作', 
                            key: 'action',
                            render: (_, record) => (
                                <Button 
                                    type="link" 
                                    onClick={() => setDownloadUrl(record.convertedFileUrl || '')}
                                    disabled={record.status !== 'completed' || !record.convertedFileUrl}
                                >
                                    下载
                                </Button>
                            )
                        }
                    ]}
                    loading={loading}
                    pagination={{
                        current: currentPage,
                        pageSize: pageSize,
                        total: total,
                        onChange: (page, size) => {
                            setCurrentPage(page);
                            setPageSize(size);
                        }
                    }}
                />
            </Card>
        </div>
    );
});

export default CadConversion;